<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar :is-back="true" :title="title" :background="background" :title-color="titleColor"></u-navbar>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view v-if="dataList1.length > 0">
								<view class="offer" v-for="(res, index) in  dataList1" :key="res.applyId">
									<view class="item">
										<view class="left">
											<image :src="'http://localhost:8088'+res.image" mode="aspectFill"></image>
										</view>
										<view class="content">
											<view class="relation">
												<view>联系方式:</view>
												<view>{{res.relation}}</view>
											</view>
											<view class="remark" v-if="res.remark != null">
												<view>备注:</view>
												<view>{{res.remark}}</view>
											</view>
										</view>
									</view>
									<view class="bottom">
										<view class="cancel btn" @click="refuseApply(res.applyId)">拒绝</view>
										<view class="success btn" @click="agreeApply(res.offerId,res.ruserId)">同意</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
							</view>
							<view v-if="dataList1.length <= 0">
								<view class="centre">
									<image src="../../static/noData.png" mode="aspectFit"></image>
									<view class="explain">
										您还没有未审核的悬赏榜领取信息
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view class="offer" v-if="dataList2.length > 0">
								<view class="item" v-for="(res, index) in  dataList2" :key="res.applyId">
									<view class="left">
										<image :src="'http://localhost:8088'+res.image" mode="aspectFill"></image>
									</view>
									<view class="content">
										<view class="title u-line-2">{{res.comName}}</view>
										<view class="delivery-time">发布时间 {{$u.timeFormat(res.endTime, 'yyyy-mm-dd')}}
										</view>
										<view class="money">赏金 {{res.money}}</view>
									</view>
									<view class="right">
										<view v-if="res.offerStatus == 1" class="status">待通过</view>
										<view v-else class="status">已通过</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus[1]" bgColor="#f2f2f2"></u-loadmore>
							</view>
							<view v-if="dataList2.length <= 0">
								<view class="centre">
									<image src="../../static/noData.png" mode="aspectFit"></image>
									<view class="explain">
										您还没有申请的悬赏榜
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view class="offer" v-if="dataList3.length > 0">
								<view class="item" v-for="(res, index) in  dataList3" :key="res.applyId">
									<view class="left">
										<image :src="'http://localhost:8088'+res.image" mode="aspectFill"></image>
									</view>
									<view class="content">
										<view class="title u-line-2">{{res.comName}}</view>
										<view class="delivery-time">发布时间 {{$u.timeFormat(res.endTime, 'yyyy-mm-dd')}}
										</view>
										<view class="money">赏金 {{res.money}}</view>
										<view class="relation" v-if="res.offerStatus == 4">
											<u-icon name="phone-fill" :size="30" color="rgb(94,94,94)" :margin-left="-10" :label="res.relation"></u-icon>
										</view>
									</view>
									<view class="right">
										<view v-if="res.offerStatus == 1" class="status">待完成</view>
										<view v-else class="status">已完成</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus[2]" bgColor="#f2f2f2"></u-loadmore>
							</view>
							<view v-if="dataList3.length <= 0">
								<view class="centre">
									<image src="../../static/noData.png" mode="aspectFit"></image>
									<view class="explain">
										您还没有悬赏榜相关的信息
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				title: "我的悬赏榜",
				titleColor: "#330867",
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)'
				},
				list: [{
						name: '待审核'
					},
					{
						name: '我的申请'
					},
					{
						name: '我的悬赏榜'
					}
				],
				current: 0,
				dataList1: [],
				dataList2: [],
				dataList3: [],
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore'],
				// 查询参数
				queryParams1: {
					pageNum: 1,
					pageSize: 10
				},
				// 查询参数
				queryParams2: {
					pageNum: 1,
					pageSize: 10
				},
				// 查询参数
				queryParams3: {
					pageNum: 1,
					pageSize: 10
				},
				pageTotal1: 0,
				pageTotal2: 0,
				pageTotal3: 0,
			};
		},
		computed: {
			...mapGetters(['getUserInfo'])
		},
		onLoad() {
			this.getDataList1();
			this.getDataList2();
			this.getDataList3();
		},
		methods: {
			getDataList1() {
				this.queryParams1.pageNum = 1;
				Vue.prototype.$u.api.getMyAuditOffer({
					pageNum: this.queryParams1.pageNum,
					pageSize: this.queryParams1.pageSize,
					iuserId: this.getUserInfo.userId
				}).then(res => {
					if (res.total < this.queryParams1.pageSize) {
						this.loadStatus[0] = 'nomore'
					}
					this.pageTotal1 = Math.ceil(res.total / this.queryParams1.pageSize);
					if (res.code == 200 && res.rows.length > 0) {
						this.dataList1 = res.rows
					} else {
						this.dataList1 = []
					}
				})
			},
			getDataList2() {
				this.queryParams2.pageNum = 1;
				Vue.prototype.$u.api.getMyApplyOffer({
					pageNum: this.queryParams2.pageNum,
					pageSize: this.queryParams2.pageSize,
					userId: this.getUserInfo.userId
				}).then(res => {
					if (res.total < this.queryParams2.pageSize) {
						this.loadStatus[1] = 'nomore'
					}
					this.pageTotal2 = Math.ceil(res.total / this.queryParams2.pageSize);
					if (res.code == 200 && res.rows.length > 0) {
						this.dataList2 = res.rows
					} else {
						this.dataList2 = []
					}
				})
			},
			getDataList3() {
				this.queryParams3.pageNum = 1;
				Vue.prototype.$u.api.getMyPriceList({
					pageNum: this.queryParams3.pageNum,
					pageSize: this.queryParams3.pageSize,
					iuserId: this.getUserInfo.userId
				}).then(res => {
					if (res.total < this.queryParams3.pageSize) {
						this.loadStatus[2] = 'nomore'
					}
					this.pageTotal3 = Math.ceil(res.total / this.queryParams3.pageSize);
					if (res.code == 200 && res.rows.length > 0) {
						this.dataList3 = res.rows
					} else {
						this.dataList3 = []
					}
				})
			},
			reachBottom() {
				if (this.current == 0) {
					this.loadStatus[0] = 'loading';
					this.queryParams1.pageNum = ++this.queryParams1.pageNum;
					if (this.queryParams1.pageNum <= this.pageTotal1) {
						setTimeout(() => {
							Vue.prototype.$u.api.getMyAuditOffer({
								pageNum: this.queryParams1.pageNum,
								pageSize: this.queryParams1.pageSize,
								iuserId: this.getUserInfo.userId
							}).then(res => {
								if (res.code == 200 && res.rows.length > 0) {
									this.dataList1 = this.dataList1.concat(res.rows)
									this.loadStatus[0] = 'loadmore';
								} else {
									this.loadStatus[0] = 'nomore'
								}
							})
						}, 2000)
					} else {
						this.loadStatus[0] = 'nomore'
					}
				}
				if (this.current == 1) {
					this.loadStatus[1] = 'loading';
					this.queryParams2.pageNum = ++this.queryParams2.pageNum;
					if (this.queryParams2.pageNum <= this.pageTotal2) {
						setTimeout(() => {
							Vue.prototype.$u.api.getMyApplyOffer({
								pageNum: this.queryParams2.pageNum,
								pageSize: this.queryParams2.pageSize,
								userId: this.getUserInfo.userId
							}).then(res => {
								if (res.code == 200 && res.rows.length > 0) {
									this.dataList2 = this.dataList2.concat(res.rows)
									this.loadStatus[1] = 'loadmore';
								} else {
									this.loadStatus[1] = 'nomore'
								}
							})
						}, 2000)
					} else {
						this.loadStatus[1] = 'nomore'
					}
				} else {
					this.loadStatus[2] = 'loading';
					this.queryParams3.pageNum = ++this.queryParams3.pageNum;
					if (this.queryParams3.pageNum <= this.pageTotal3) {
						setTimeout(() => {
							Vue.prototype.$u.api.getMyPriceList({
								pageNum: this.queryParams3.pageNum,
								pageSize: this.queryParams3.pageSize,
								iuserId: this.getUserInfo.userId
							}).then(res => {
								if (res.code == 200 && res.rows.length > 0) {
									this.dataList3 = this.dataList3.concat(res.rows)
									this.loadStatus[2] = 'loadmore';
								} else {
									this.loadStatus[2] = 'nomore'
								}
							})
						}, 2000)
					} else {
						this.loadStatus[2] = 'nomore'
					}
				}
			},

			// 拒绝通过申请
			refuseApply(applyId) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定拒绝该申请吗',
					success: function(res) {
						if (res.confirm) {
							Vue.prototype.$u.api.refuseApply({
								applyId: applyId
							}).then(res => {
								if (res.code == 200) {
									Vue.prototype.$u.toast("拒绝成功");
									that.getDataList1();
								} else {
									Vue.prototype.$u.toast(res.msg);
								}
							})
						} else if (res.cancel) {

						}
					}
				});
			},
			// 同意通过申请
			agreeApply(offerId, ruserId) {
				Vue.prototype.$u.api.agreeApply({
					offerId: offerId,
					ruserId: ruserId
				}).then(res => {
					if (res.code == 200) {
						Vue.prototype.$u.toast("同意成功");
						this.getDataList1();
						this.getDataList3();
					} else {
						Vue.prototype.$u.toast(res.msg);
					}
				})
			},

			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.offer {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.item {
			display: flex;
			margin: 20rpx 0 0;
			justify-content: space-between;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.relation {
					display: flex;
					
					:first-child {
						flex-shrink: 0;
						margin-right: 10rpx;
						font-weight: bold;
					}

					:last-child {
						color: #dd6161;
					}
				}

				.remark {
					display: flex;
					margin-top: 10rpx;

					:first-child {
						flex-shrink: 0;
						margin-right: 10rpx;
						font-weight: bold;
					}

					:last-child {
						color: #dd6161;
					}
				}

				.title {
					font-size: 28rpx;
					line-height: 50rpx;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
					white-space: normal !important;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}

				.money {
					padding-top: 10rpx;
					color: #ff007f;
					font-size: 26rpx;
				}
				
				.relation {
					margin-top: 14rpx;
				}
			}
			
			.right {
				margin-left: 20rpx;
				padding-top: 20rpx;
				text-align: right;
				color: #f29100;
			}
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;

			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
			}

			.success {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}
</style>
